<template>
  <div class="my-menu">
    <div class="nav-line">
      <div class="selebox" v-on:mousemove="showSelebox" v-on:mouseout="hideSelebox">
        <span>选择彩种</span>
        <ul class="kinds" v-show="show">
          <li class="kinds-cell">
            <a href="/trade/ssq/">
              <span class="czlogo ssq"><img :src="ssqUrl"></span>
              <span class="kind">双色球</span>
              <span class="note">2元赢取1000万</span>
            </a>
          </li>
          <li class="kinds-cell">
            <a href="/trade/cqssc/">
              <span class="czlogo cqssc"><img :src="cqsscUrl"></span>
              <span class="kind">重庆时时彩</span>
              <span class="note">每天120期</span>
            </a>
          </li>
          <li class="kinds-cell">
            <a href="/trade/sanfencai/">
              <span class="czlogo sanfencai"><img :src="sanfencaiUrl"></span>
              <span class="kind">三分彩</span>
              <span class="note">三分钟1期</span>
            </a>
          </li>
          <li class="kinds-cell">
            <a href="/trade/wufencai/">
              <span class="czlogo wufencai"><img :src="wufencaiUrl"></span>
              <span class="kind">五分彩</span>
              <span class="note">五分钟1期</span>
            </a>
          </li>
          <li class="kinds-cell">
            <a href="/trade/gd115/">
              <span class="czlogo 115"><img :src="gd11x5Url"></span>
              <span class="kind">11选5</span>
              <span class="note">猜对一个号就中奖</span>
            </a>
          </li>
        </ul>
      </div>
      <ul class="menu-box">
        <li class="menu-cell"><router-link to="/index">网站首页</router-link></li>
        <li class="menu-cell"><router-link to="/goucai">购彩大厅</router-link></li>
<!--         <li class="menu-cell"><router-link :to="{ name: 'hemai', params: { gameType: ''}}">合买大厅</router-link></li> -->
   <!--      <li class="menu-cell"><router-link to="/hemai?gameType=3">合买大厅</router-link></li> -->
        <li class="menu-cell"><router-link to="/hemai">合买大厅</router-link></li>
        <li class="menu-cell"><router-link to="/kaijiang/">彩票开奖</router-link></li>
        <li class="menu-cell"><router-link to="/zoushitu">走势图表</router-link></li>
        <li class="menu-cell"><router-link to="/new">彩票资讯</router-link></li>
        <li class="menu-cell"><router-link to="/youhui">优惠活动</router-link></li><li class="menu-cell"><a href="/m.html">手机购彩</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-menu',
  data () {
    return {
      ssqUrl: '../../static/images/column/ssq.png',
      cqsscUrl: '../../static/images/column/cqssc.png',
      sanfencaiUrl: '../../static/images/column/sanfencai.png',
      wufencaiUrl: '../../static/images/column/wufencai.png',
      gd11x5Url: '../../static/images/column/gd11x5.png',
      show: false
    }
  },
  methods: {
    showSelebox: function(event){
      this.show = true
    },
    hideSelebox: function(event){
      this.show = false
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  a.router-link-active {
    background-color: #CD3527;
  }
.nav-line{background-color: #e60000;height: 45px;line-height: 45px; margin: 0 auto; width: 1000px;}
.nav-line .selebox a:link,.nav-line .menu-box a:link{color: #fff;font-size: 15px;}
.nav-line .selebox{width: 230px;float: left;position: relative;color: #fff;font-size: 15px;}
.nav-line .selebox #kinds{display: none;}
.nav-line .selebox .kinds{position: absolute;border: 2px solid #e60000;width: 230px;top: 43px;z-index: 999;background-color: #fff;}
.nav-line .selebox .kinds .kinds-cell{border-bottom: 1px dashed #eee;padding: 5px;overflow: hidden; }
.nav-line .selebox .kinds .kinds-cell:HOVER{background-color: #f9f9f9;}
.nav-line .selebox .kinds .kinds-cell a{color: #444;}
.nav-line .selebox .kinds .kinds-cell .czlogo{float: left;width: 35px;height: 35px;}
.nav-line .selebox .kinds .kinds-cell .czlogo img{width: 100%;}
.nav-line .selebox .kinds .kinds-cell .kind{float: left;font-size: 15px;padding: 0 5px;line-height: 34px;}
.nav-line .selebox .kinds .kinds-cell .note{float: left;font-size: 12px;color: #888;line-height: 34px;}

/*.nav-line .menu-box{width: 770px;float: left;}*/
.nav-line .menu-box{width: 770px;float:center;}
.nav-line .menu-box .menu-cell{width: 96px;float: left;text-align: center;color: #fff;}
.nav-line .menu-box .menu-cell a{color: #fff;display: block;}
.nav-line .menu-box .menu-cell a:HOVER{background:#CD3527; }
.nav-line .menu-box .menu-cell a:link{color: #fff;}
.nav-line .menu-box .mui-active{background-color: #CD3527;}

</style>
